<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <link rel="stylesheet" href="/game/wuziqi/css/style.css">
    <!-- 引入 layui.css -->
    <link href="/layui/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
</head>
<body>

<div class="left">
    <!-- 左边的内容 -->
    <canvas id="gameCanvas" width="50%"></canvas>
<!--    <div id="winLayer">-->
<!--        <p id="winMessage"></p>-->
<!--        <button id="resetButton">重置游戏</button>-->
<!--    </div>-->
</div>

<div class="right">
    <!-- 右边的内容 -->
    <div class="body">
        <div class="chat-output" id="chatOutput">
            <div id="gameStartText"></div>
            <div id="turn"></div>
            <div id="score"></div>
            <div class="player-info">
                <div class="layui-row" style="margin: 10px 0;">
                    <div class="player" id="player1"><span id="user1">玩家1: </span><span
                            id="player1-name">等待加入</span>
                        <span id="user1Ready">未准备</span>
                        <button class="join-button layui-btn layui-bg-blue layui-btn-sm" id="join-player1">加入</button>
                    </div>
                </div>
                <div class="layui-row" style="margin: 10px 0;">
                    <div class="player" id="player2"><span id="user2">玩家2: </span><span
                            id="player2-name">等待加入</span>
                        <span id="user2Ready">未准备</span>
                        <button class="join-button layui-btn layui-bg-blue layui-btn-sm" id="join-player2">加入</button>
                    </div>
                </div>
            </div>
            <div class="game-button-container">
                <div class="layui-btn-container">
                    <button class="game-button layui-btn layui-bg-blue" id="prepare">准备</button>
                </div>
<!--                <div class="layui-btn-container">-->
<!--                    <button class="game-button layui-btn layui-bg-blue" id="undo">悔棋</button>-->
<!--                </div>-->
                <div class="layui-btn-container">
                    <button class="game-button layui-btn layui-bg-blue" id="surrender">认输</button>
                </div>
            </div>
            <div class="spector-container">
                <button class="button layui-btn layui-bg-blue" id="join-as-spectator">加入空座位(观战)
                </button>
                <div id="spectator-seat">观战席: <span id="spectators"></span></div>
            </div>
        </div>
        <div class="chat-container">
            <div class="chat-header">
                <h2>五子棋</h2>
                <div class="room-controls">
                    <label for="roomInput"></label>
                    <input type="text" id="roomInput" placeholder="输入房间号">
                    <button id="joinRoomBtn">加入房间</button>
                    <button id="createRoomBtn">创建房间</button>
                </div>
            </div>
            <div class="chat-history" id="chatHistory">
                <!-- 聊天消息将动态添加到这里 -->
            </div>
            <div class="chat-input">
                <label for="messageInput"></label>
                <textarea id="messageInput" placeholder="输入消息..."></textarea>
                <button id="sendBtn">发送</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="roomId" value="">
<script src="/game/wuziqi/js/script.js"></script>
<script src="/game/wuziqi/js/chat.js"></script>
<script src="/game/wuziqi/js/websocket.js"></script>
<script>
    window.addEventListener('message', function (event) {
        console.log('接收到消息');
        console.log(event.data);
    });
</script>
</body>
</html>